<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./vue.js"></script>
    <style>
        .isActive {
            background-color: red;
        }
    </style>
</head>
<body>
  <div id="app">
    <ul>
       <li   v-for="item in  list">
           {{item}}
       </li>
    </ul>

    <ul>
        <!--  item 数组中每一项  index  表示索引   key 目的 提升性能 尽量采用唯一的值-->  
        <li  v-for="(item,index) in  list"  v-bind:key="item">
             数组中的每一项的值:{{item}}   ---------  索引是：{{index}}
        </li>
    </ul>
    
    <ul>
        <!--  item 数组中每一项  index  表示索引   key 目的 提升性能 尽量采用唯一的值-->  
        <li  v-for="(item,index) in  list"  :key="item"  
          @click='myClick(index)'
          :class="  index==currentIndex ?'isActive':'' "
        >
             数组中的每一项的值:{{item}}   ---------  索引是：{{index}}

           
        </li>
    </ul>
  </div>
 
    <script>

          new Vue({
              el:'#app',
              data:{
                  list:['苹果','橘子','香蕉','黄瓜'],
                  currentIndex:0,
                 
               
              },
              methods:{
                myClick(i) {
                    console.log(i)
                    // alert(1)
                    this.currentIndex=i
                  
                }
              }
          })

    </script>
</body>
</html>